{% extends 'base.html' %}
{% load staticfiles %}
{% block css %}
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'plugins/datatable/css/dataTables.bootstrap.min.css' %}">
    <link href="{% static 'plugins/datetimepicker/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet" media="screen">
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
{#    <script src="{% static 'js/jquery.form.js' %}"></script>#}
    <script src="{% static 'plugins/datatable/js/jquery.dataTables.js' %}"></script>
    <script src="{% static 'plugins/datatable/js/dataTables.bootstrap.min.js' %}"></script>

    <script >
       $(function () {
           // datatable js 配置
           var dom = '<"col-xs-6 left-col-side"<"toolbar">><"col-xs-6 right-col-side"f>t<"col-xs-6 left-col-side"l><"col-xs-6 right-col-side"p>r';
           var tb_events = $('#tb_events').DataTable({
               "dom": dom,
               "autoWidth": true,
               "searching": true,
               "language": {
                   "lengthMenu": "每页 _MENU_ 条记录",
                   "zeroRecords": "没有找到记录",
                   "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                   "infoEmpty": "无记录",
                   "infoFiltered": "(从 _MAX_ 条记录过滤)",
                   "paginate": {
                       "next": "下一页",
                       "previous": "上一页",
                       "first": "首页",
                       "last": "尾页"
                   }
               }
           });

           // 按钮事件绑定
           initDataTable();
           $('#tb_events').on('draw.dt', function () {
               initDataTable();
           });
       })

       function initDataTable() {
            $('.pic-detail-in').on('click', function () {
                var in_pic = $(this).data('in-pic');
                layer.open({
                  type: 2,
                  title: '进库图片',
                  shadeClose: true,
                  shade: 0.8,
                  area: ['725px', '640px'],
                  content: in_pic,
                });
            });
            $('.pic-detail-out').on('click', function () {
                var out_pic = $(this).data('out-pic');
                layer.open({
                  type: 2,
                  title: '出库图片',
                  shadeClose: true,
                  shade: 0.8,
                  area: ['725px', '640px'],
                  content: out_pic,
                });
            });
        }
       $('.form_datetime').datetimepicker({
            format: "yyyy-mm-dd",
            minView: 2,
            autoclose: true,
            todayBtn: true,
            pickerPosition: 'bottom-left'
        });

       $('#exportData').on('click', function () {
            var start_time = $('#start_time').val();
            var end_time = $('#end_time').val();
            window.location.href="{% url 'managerapp:export_histroy' %}?start_time="+start_time+"&end_time="+end_time;
        });

    </script>
{% endblock %}
{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        历史记录明细
      </h1>
      <ol class="breadcrumb">
        <li><i class="fa fa-dashboard"></i> 明细</li>
        <li class="active">历史明细</li>
      </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">查询条件</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
            <form role="form">
            <div class="form-group">
                <label for="subtext" class="col-sm-1 control-label">开始时间</label>
                <div class="col-sm-3 ">
                    <div class="input-group date form_datetime pl15" >
                        <input class="form-control" id="start_time" name="start_time" size="16" type="text" value="{{ start_time }}">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
                <label for="subtext" class="col-sm-1 control-label">结束时间</label>
                <div class="col-sm-3">
                    <div class="input-group date form_datetime pl15" >
                        <input class="form-control" id="end_time" name="end_time" size="16" type="text" value="{{ end_time }}">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
                <div class="col-sm-3">
                    <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-search"></i> 查询</button>
                    <a class="btn btn-sm btn-primary " id="exportData"><i class="fa fa-download"></i> 导出 </a>
                </div>
            </div>
            </form>
          </div>
        </div>
        {#明细#}
        <div class="box-body">
             <table id="tb_events" class="table table-hover table-bordered">
                <thead>
                   <th>序号</th>
                   <th>车牌号</th>
                   <th>车辆类型</th>
                   <th>进库时间</th>
                   <th>出库时间</th>
                   <th>计费折扣</th>
                   <th>计费金额</th>
                   <th>实付金额</th>
                   <th>操作</th>
                <tbody>
                    {% for events in events_histroy %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ events.card_num }}</td>
                        <td>{% if events.car_type == 1 %}月卡{% elif events.car_type == 3%} 临时车 {% else %}特殊车辆{% endif %}</td>
                        <td>{{ events.in_timer|date:'Y-m-d H:i' }}</td>
                        <td>{{ events.out_timer|date:'Y-m-d H:i'  }}</td>
                        <td>{{ events.factDiscount }}</td>
                        <td>{{ events.factMoney }}</td>
                        <td>{{ events.payMoney }}</td>
                        <td><a href='javascript:void(0);' class='btn btn-default btn-sm pic-detail-in'
                               data-in-pic='{{ events.in_pic }}'
                            data-toggle='tooltip' data-placement='top' title='进库图片查看'>
                            <i class='fa fa-eye' title='进库图片查看' ></i>
                            </a>
                            <a href='javascript:void(0);' class='btn btn-default btn-sm pic-detail-out'
                               data-out-pic='{{ events.out_pic }}'
                            data-toggle='tooltip' data-placement='top' title='出库图片查看'>
                            <i class='fa fa-eye' title='出库图片查看' ></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
             </table>
        </div><!-- /.box-body -->
    </section>
    <!-- /.content -->
  </div>
{% endblock %}